<app-left-line
  [text]="'欠费'"
></app-left-line>

<div class="owe-fee my-list">
  <div class="my-list-header">
    <span class="usageCode">用户编号: {{ usageCode }}</span>
    <span class="address">{{address}}</span>
  </div>

  <div class="content">
    <nz-table #smallTable nzSize="small" nzBordered
      [nzData]="data"
      [nzLoading]="dataLoading"
      [nzShowPagination]="false"
    >
      <thead>
        <tr>
          <th>序号</th>
          <th *ngFor="let col of cols | dealObj: 'value'">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of smallTable.data; let i = index">
          <td>{{ i + 1 }}</td>
          <td>{{ data['name'] }}</td>
          <!-- <td>{{ data['quantity'] }}</td> -->
          <td [nzAlign]="'right'">{{ data['prepayAmt'] }}</td>
          <td [nzAlign]="'right'">{{ data['falsify'] }}</td>
          <td [nzAlign]="'right'">{{ data['total'] }}</td>
          <!-- <td>
            <nz-tag [nzColor]="state[data['state']]?.color">
              {{ state[data['state']]?.value }}
              {{ data['lockNote'] ? ': '+data['lockNote'] : '' }}
            </nz-tag>
          </td> -->
          <td>
            <button nz-button nzType="link" (click)="goPay(data)">缴费</button>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>

  <nz-alert style="margin-top: 12px;"
    nzType="success"
    nzMessage="温馨提示"
    [nzDescription]="alertInfo"
  ></nz-alert>
  <ng-template #alertInfo>
    <div>
      <p>1. 费用合计为当前用户编号欠费总额，需要缴纳大于等于当前欠费总额，多缴部分将存为此用户编号账户余额。</p>
      <p>2. 余额大于等于当前费用合计时，可直接进行抵扣。余额小于当前费用合计时，可进行部分抵扣</p>
      <p>3. 缴费成功后因网络延迟原因可能导致到账延迟，请稍后重新进入页面查看欠费和余额信息，请勿重复缴纳</p>
    </div>
  </ng-template>
</div>

<app-pay [(nzVisible)]="payModalVisible" [data]="payData"
  (onClose)="payModalClose($event)"
></app-pay>